<style>

    .flex{
        display: flex;
        align-items: center;
        margin-left: 50px;
        margin-bottom: 10px;
    }
    .avatar{
        width: 60px;
        border-radius: 50%;
        height: 60px;
    }
    .avatars{
        width: 40px;
        border-radius: 50%;
        height: 40px;
    }
    .titleBar{
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 5px 0;
        padding-left: 30px;
    }
    .title{
        margin: 0;
    }
    .listWrap{
        padding:0 20px;

    }
    .nickname{
        color: #999;
    }
    .nickname:nth-child(2){
        line-height: 30px;
    }
    .bar{
        padding: 15px 0;
    }
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="flex">
        <!--<img src="https://img.looin.cn/luyin/5a44c7ba5bbe4ec867233d67e4806848.jpg" alt="">-->
        <img class="avatar" src="{$rows.avatar}">
        <div class="titleBar">
            <h4 class="title">{$rows.name}</h4>
            <h4 class="title">{$rows.time}</h4>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('日志内容')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea data-rule="required" disabled rows="10" cols="67">{$row.content|htmlentities}</textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="c-img" class="control-label col-xs-12 col-sm-2">{:__('图片')}:</label>
        <div class="col-xs-12 col-sm-8">
            <!--<div class="input-group">-->
            <input id="c-img"  data-rule="" class="form-control" readonly="readonly" type="text" value="{$row.images|htmlentities}">
            <!--</div>-->
            {if condition="$row.images != '' "}
            <ul class="row list-inline plupload-preview" id="p-img">
                {foreach $row.image as $index=>$vo}
                <li class="col-xs-3">
                    <a href="{$vo}" data-url="{$vo}" target="_blank" class="thumbnail">
                        <img src="{$vo}" onerror="this.src='/QjaGeuOTbZ.php/ajax/icon?suffix=jpg';this.onerror=null;" class="img-responsive">
                    </a>
                </li>
                {/foreach}
            </ul>
            {/if}
        </div>
    </div>

    <div class="form-group" id="comment">
        <!--<label class="control-label col-xs-6 col-sm-2"></label>-->
        <div class="col-xs-8 col-sm-8" style="margin-left: 75px;">
            <input id="c-comment" class="form-control" type="text" value="" placeholder="评论日志">
        </div>
        <a href="javascript:;" name="users" class="btn btn-success" >{:__('发送')}</a>
    </div>

    <div  class="form-group">
        <div class="flex" style="border-top: 1px solid #93a1a1; padding-top: 10px; margin-right: 20px;box-sizing: border-box">
            <h3 class="title" style="color: red;padding-left:20px">评论:</h3>
        </div>

        <div class="listWrap">
            <!--<div class="flex" style="border-bottom: 1px solid #93a1a1;">-->
                <!--<img class="avatars" src="">-->
                <!--<div class="titleBar">-->
                    <!--<h4 class="title">123</h4>-->
                    <!--<h4 class="title">123</h4>-->
                    <!--<h4 class="title">156</h4>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">{:__('Close')}</button>
        </div>
    </div>
</form>
<script src="/assets/img/jquery-3.4.1.min.js"></script>
<script>
    var is = {$is};
    var pan = {$pan};
    var log_id = {$row.id};

    if(is == 1) {
        $('#comment').hide();
    }else if (is == 2){
        $('#comment').show();
    }

    // if(pan == 1) {
    //     $('#comment').hide();
    // }else if (pan == 2){
    //     $('#comment').show();
    // }

    //console.log(log_id);

    $("a[name='users']").click(function(){
        let type =  $("#c-comment").val();
        //console.log(type);

        $.ajax({
            url:"oa/log/for",    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{"msg":type,"id":log_id},    //参数值
            type:"POST",   //请求方式
            success:function(data){
                //请求成功时处理
                if (data.code == 0) {
                    //console.log(data);
                    Toastr.error(data.msg);
                }else {
                    Toastr.success(data.msg);
                    //$(".btn-refresh").trigger("click");

                    getList('oa/log/get_comment');

                    //parent.Layer.closeAll();
                    //$("#nickname").attr("value",data.data);
                }
            },
        });

    });
    getList('get_comment')
    function getList(url){
        $.ajax({
            url:url,    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{"id":log_id},    //参数值
            type:"POST",   //请求方式
            success:function(data){
                console.log(data)
                //请求成功时处理
                if (data.code == 0) {
                    //console.log(data);
                    Toastr.error(data.msg);
                }else {
                    $('.listWrap').empty()
                    data.data.forEach(item=>{
                        let html = `<div class="flex bar" style="border-bottom: 1px solid #93a1a1;">
                                        <img class="avatars" src="${item.avatar}">
                                        <div class="titleBar">
                                            <h4 class="title nickname">${item.nickname}</h4>
                                            <h4 class="title nickname">${item.create_time}</h4>
                                            <h4 class="title mag">${item.msg}</h4>
                                        </div>
                                    </div>`
                        $('.listWrap').append(html)
                    })


                }
            },
        });
    }

</script>
